<template>
	<view class="container">
		<view class="head">
			<u-icon @click="returnButton()" name="arrow-left" color="#fff" size="30"></u-icon>
			<u-text text="门店详情" color="#fff" size="22" align="center" margin="4vh 0px 0px 0px"></u-text>
		</view>
		<view class="head-2">
		</view>
		<view class="content">
			<image src="@/static/images/ls/洗车.jpg" style="width: 100%; height: 30vh;"></image>
			<u-text :text="shopInfo.name" size="18" bold line-height="40"></u-text>
			<view style="display: flex; align-items: center;">
				<view>
					<u-rate count="5" :readonly='true' :value="shopInfo.star" activeColor='#FFC100' gutter=1></u-rate>
				</view>
				<text style="margin-left: 10rpx; font-size: 26rpx;">{{shopInfo.star}}分 销量：{{shopInfo.sales}}</text>
			</view>
			<u-text :text="'营业时间:'+shopInfo.week" size="10" line-height="22px"></u-text>
			<u-text :text="'位置:'+shopInfo.area" size="10" line-height="22px" suffixIcon="map-fill"
				iconStyle="font-size: 18px;color:#3183FB;margin-left:10rpx" @click="navigation_btn"></u-text>
		</view>

		<view class="content">
			<u-text text="服务项目" size="18" bold line-height="40"></u-text>
			<u-radio-group placement="column">

				<view v-for="(item,index) in serviceInfo" :key="index">
					<view style="position: relative;">
						<checkbox-group>
							<checkbox :checked="item.checked" :value="item.newPrice.toString()"
								@click="addShopService(item)">{{item.name}}</checkbox>
						</checkbox-group>
						<view
							style="position:absolute;color: red;font-weight: 600;font-size: 36rpx; right:10rpx;top:-1px;">
							￥{{item.newPrice}}
							<text
								style="color: #989898;font-weight: 500;font-size: 32rpx;text-decoration: line-through">
								￥{{item.oldPrice}}
							</text>
						</view>
					</view>
					<u-text :text="item.intro" wordWrap="anywhere" size="13" line-height="25"
						margin="0 0 12px 0"></u-text>
					<view style="border-bottom: 1px solid #dcdcdc; margin-bottom: 26rpx;"></view>
				</view>

			</u-radio-group>
		</view>

		<view class="content">
			<u-text text="服务评价" size="18" bold line-height="40"></u-text>

			<view v-for="(item,index) in evaluateInfo" :key="index">
				<view v-if="item.cheUser.id == shopInfo.id">
					<view style="display: flex;margin-top: 10rpx;">
						<image src="@/static/images/ls/头像.jpg"
							style="width: 20vw;height: 20vw;border-radius: 10vw;margin-right: 30rpx;"></image>
						<view>
							<view
								style="display: flex;justify-content: space-between;width: 60vw;margin-bottom: 10rpx;">
								<text style="font-size: 32rpx;">{{item.cheUser.realName}}</text>
								<text style="color: #989898;">{{item.commentTime}}</text>
							</view>
							<u-rate count="5" :readonly='true' :value="item.star" activeColor='#FFC100'
								gutter=1></u-rate>
							<view style="width: 60vw;margin-top: 20rpx;">
								<u-text :text="item.comments" size="13"></u-text>
							</view>
						</view>
					</view>
					<view style="border-bottom: 1px solid #dcdcdc; margin-bottom: 26rpx;margin-top: 15rpx;"></view>
				</view>
			</view>
		</view>

		<view class="bottom">
			<view class="left-btn" @click="show = true">
				<u-icon label="购物车" size="25" color="#fff" name="shopping-cart-fill" label-size="16" label-color="#fff"
					top="1px"></u-icon>
			</view>
			<view class="right-btn">
				<u-icon @click="confirm" label="确认已选服务" size="25" color="#fff" name="checkmark-circle" label-size="16"
					label-color="#fff" top="1px"></u-icon>
			</view>
		</view>
		<view style="height: 22vh;"></view>

		<u-popup :show="show" mode="bottom" @close="close" @open="open">
			<view style="margin: 20px;">
				<view class="">服务订单</view>
				<view v-for="(item,index) in shopCarList" :key="index" class="shopCar">
					<checkbox-group>
						<checkbox :checked="item.checked" :value="item.money.toString()" @click="addShopCar(item)">
							{{item.name}}
						</checkbox>
					</checkbox-group>
					<text>￥{{item.money}}</text>
				</view>
				<view style="margin-top: 5px;">
					合计:{{shopServiceMoney+shopCarMoney}}
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				chelist: [],
				show: false,
				allMoney: 0,
				// 已选择服务
				serviceList: {
					service: [],
					shopCar: []
				},
				// 商户id
				shop_id: 1,
				// 商户信息
				shopInfo: {
					id: 0,
					name: '未获取',
					star: 0,
					week: '未获取',
					area: '未获取',
					long_lat: '未获取',
					sales: '未获取',
				},
				// 服务项目列表
				shopServiceMoney: 0,
				serviceInfo: [{
					"createBy": null,
					"createTime": "",
					"updateBy": null,
					"updateTime": null,
					"remark": null,
					"id": '',
					"name": "",
					"shopId": '',
					"serviceSortId": '',
					"oldPrice": 0,
					"newPrice": 0,
					"intro": "",
					"deleted": '',
					"serviceSort": null,
					"serviceItems": null,
					"shop": null,
					checked: false
				}],
				// 评价列表
				evaluateInfo: [],
				// 购物车列表
				shopCarMoney: 0,
				shopCarList: [{
					id: '',
					name: '',
					money: 0,
					serviceId: '',
					checked: false
				}]
			}
		},
		methods: {
			// 获取商家信息
			getNotice(shop_id) {
				let that = this;
				this.$http({
					url: '/api/shop/manage/' + shop_id,
					method: 'GET',
					success(res) {
						if (!res.data.data) {
							console.log("error:获取该商家信息失败" + res)
							return;
						}
						// console.log(res.data.data)
						that.shopInfo = res.data.data;
					}
				});
			},
			// 获取该商家服务信息
			getShopService(shop_id) {
				let that = this;
				this.$http({
					url: '/api/service/service/byshopid/' + shop_id,
					method: 'GET',
					success(res) {
						if (!res.data.rows) {
							console.log("error:获取该商家服务失败" + res)
							return;
						}
						// console.log(res.data.rows)
						that.serviceInfo = res.data.rows;
					}
				});
			},
			// 获取该商家所有订单后查询订单评价
			getOrderList_Evaluate(shop_id) {
				let that = this;
				this.$http({
					url: '/api/orders/orders/list',
					method: 'GET',
					success(res) {
						if (!res.data.rows) {
							console.log("error:获取该商家订单评价失败" + res)
							return;
						}
						// console.log(res.data.rows)
						that.evaluateInfo = res.data.rows;
					}
				});
			},
			// 获取购物车项目详情列表
			getShopServiceList() {
				let that = this;
				this.$http({
					url: '/api/service/items/list',
					method: 'GET',
					success(res) {
						if (!res.data.rows) {
							console.log("error:获取购物车项目详情失败" + res)
							return;
						}
						// console.log(res.data.rows)
						that.shopCarList = res.data.rows;
					}
				});
			},
			addShopService(e) {
				// console.log(e)
				e.checked = !e.checked;
				if (e.newPrice)
					this.shopServiceMoney = this.serviceInfo.reduce((sum, e) => sum += (e.checked ? e.newPrice : 0), 0);
				else console.log(e)
			},
			addShopCar(e) {
				// console.log(e)
				e.checked = !e.checked;
				if (e.money)
					this.shopCarMoney = this.shopCarList.reduce((sum, e) => sum += (e.checked ? e.money : 0), 0);
				else console.log(e)
			},

			returnButton() { // 返回
				uni.redirectTo({
					url: '/pages/ls/nearbyStores/nearbyStores?shop_id=' + this.shop_id
				})
			},
			navigation_btn() { // 位置
				uni.redirectTo({
					url: '/pages/ls/navigation/navigation?shop_id=' + this.shop_id
				})
			},
			confirm() { // 提交
				this.allMoney = this.shopServiceMoney + this.shopCarMoney;
				if (this.allMoney == 0) {
					alert("请选择服务");
					return;
				}
				this.serviceInfo.forEach((item) => {
					if (item.checked) this.serviceList.service.push(item)
				});
				this.shopCarList.forEach((item) => {
					if (item.checked) this.serviceList.shopCar.push(item)
				});
				let list = JSON.stringify(this.serviceList);
				uni.redirectTo({
					url: '/pages/ls/confirmOrder/confirmOrder?shop_id=' + this.shop_id +
						'&allMoney=' + this.allMoney + '&service=' + list
				})
			},
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			}
		},
		onLoad(options) {
			if (!options.shop_id) console.log(options);
			this.shop_id = options.shop_id;
			this.getNotice(options.shop_id);
			this.getShopService(options.shop_id);
			this.getShopServiceList();
			this.getOrderList_Evaluate(options.shop_id);
		}
	}
</script>

<style lang="scss">
	.bottom {
		background-color: white;
		width: 100%;
		height: 10vh;
		position: fixed;
		bottom: 0vh;
		padding: 0 5vw;
		box-sizing: border-box;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 3vh;


		.left-btn {
			width: 40vw;
			height: 6vh;
			background-image: url('@/static/images/ls/矩形 10 拷贝@3x.png');
			background-size: 100%;
			background-repeat: no-repeat;
			box-sizing: border-box;
			padding: 4px 0px 0 9vw;
		}

		.right-btn {
			width: 40vw;
			height: 6vh;
			background-image: url('@/static/images/ls/矩形 10 拷贝 2@3x.png');
			background-size: 100%;
			background-repeat: no-repeat;
			box-sizing: border-box;
			padding: 4px 0px 0 3vw;
		}
	}

	.content {
		// height: 85vh;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 30rpx 25rpx;
		background-color: white;
		width: 90vw;
		margin: 0 auto;
		margin-bottom: 2vh;
		transform: translateY(12vh);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;

	}

	.head-2 {
		position: absolute;
		background-color: #3183FB;
		width: 100%;
		height: 250px;
		overflow: auto;
		z-index: 0;
	}

	.head {
		position: fixed;
		background-color: #3183FB;
		width: 100%;
		height: 80px;
		overflow: auto;
		z-index: 3;

		.u-icon {
			position: fixed;
			top: 4vh;
		}
	}

	.shopCar {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		border-bottom: 1px solid gray;
	}
</style>